import React from 'react'
import { useNavigate,useLocation } from 'react-router-dom';
import {  Layout, Menu,Button, Modal, Space} from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';

import { eventBus } from '../../../utils/eventBus';

import useForceUpdate from '../../../hooks/useForceUpdate';

export default function HomeHead() {

  const menu =[
    {
      key:'mycenter',
      label: '个人中心',
    },
    {
      key:'getout',
      label: '退出登录',
    },
  ]
  const { confirm } = Modal;
  const forceUpdate = useForceUpdate()
  React.useEffect(()=>{
    eventBus.addListener('syncAvatar',function(){
      forceUpdate();
    })

  },[])

const { Header } = Layout;
  const userInfo=JSON.parse(localStorage.userInfo)
  function MenuItem (item){
    console.log(item.key)
    switch (item.key) {
      case 'mycenter':

      navigate('/Home/Proflies')

        break;
        case 'getout': 
        confirm({
          title: '您确认退出吗?',
          icon: <ExclamationCircleFilled />,
          
          onOk() {
            console.log('OK');
            localStorage.clear()
            navigate("/login")
  
          },
          onCancel() {
            console.log('Cancel');
          },
        });
  
       
    }
  } 
  const navigate=useNavigate()
  return (
    <Header className="header" style={{color:'#fff',display:"flex",justifyContent:'space-between'}} >
      <div style={{display:'flex',alignItems:'center'}} >
        <span  style={{fontSize:25,marginRight:20}}>蜗牛商城</span >
        欢迎你:{userInfo.account} <img src={`http://jacklv.cn/images/${userInfo.imgUrl}`} style={{width:50,height:50,borderRadius:50,marginLeft:20}}/>
      </div>
    <Menu theme="dark" mode="horizontal" items={menu}  style={{width:200}} onClick={MenuItem} selectedKeys={[location.pathname]}/>
  </Header>
  )
}
